import {Space, Table, Tag, Button, message, Popconfirm} from 'antd';
import React ,{Component }from 'react';
import {DownloadOutlined, WarningOutlined} from "@ant-design/icons";
import {ModelDelete, ModelDownload, ModelFeature, ModelList} from "@/services/A10/ModelController"
import styles from "@/pages/Model/model.less";
import * as echarts from "echarts";

class ExamplePage extends Component{

  state = {
    data: [],
    columns: [],
    showInput:false,
    size: '',
    xdata:[],
    ydata:[]
  }
  async componentDidMount() {

    const data = await ModelList();
    const columns = [
      {
        title: '模型列表',
        dataIndex: 'name',
        key: 'name',
        render: (text) => <a>{text}</a>,
      },
      {
        title: '模型大小',
        dataIndex: 'size',
        key: 'size',
      },
      {
        title: '下载',
        dataIndex: 'Download',
        key: 'Download',
        render:(text, record)=> {
          return (<Button type="primary" icon={<DownloadOutlined/>} onClick={()=>ModelDownload(record)} size={this.setState.size} className={styles.ButtonInfo}>下载模型</Button>);
        },
      },
      {
        title: '查看特征重要性',
        dataIndex: 'Show',
        key: 'Show',
        render:(text, record)=> {
          return (<Button type="primary"  size={this.setState.size} onClick={()=>this.handModelFeature(record)} className={styles.ButtonInfo}>查看特征重要性</Button>);
        },
      },
      {
        title: '删除',
        key: 'Delete',
        dataIndex: 'Delete',
        render:(text, record)=> {
          return (
            <Popconfirm
              title="确定要删除此文件吗?"
              onConfirm={() => this.headDeleteModel(record)}
              icon={
                <WarningOutlined
                  style={{
                    color: 'red',
                  }}
                />
              }
            >
            <Button type="primary" danger className={styles.ButtonInfo}>删除模型</Button>
            </Popconfirm>);
        },
      }
    ];


    this.setState({ columns });
    this.setState({ data });
    this.drawBarChart();
  }

  loadData = async () => {
    const data = await ModelList();
    this.setState({ data });
  }

  handModelFeature(record){
    ModelFeature(record).then((resp) => {
      if(resp.data==null){
        message.error("数据分析失败");
      }else {
        const bardata=resp.data;
        let xdata = [];
        let ydata = [];

        for (let i = 0; i < bardata.length; i++) {
          let keys = Object.keys(bardata[i]);
          let values = Object.values(bardata[i]);
          xdata.push(keys[0]);
          ydata.push(values[0]);
        }
        this.setState({xdata});
        this.setState({ydata});
        this.drawBarChart();
      }
    })

  }

  headDeleteModel(record){
    ModelDelete(record).then((resp) => {
      if(resp.data=="success"){
        message.success("删除模型成功");
      }else {
        message.error("删除模型失败");
      }
      this.loadData()
    });
  }

  drawBarChart() {
    const barChartDom = document.getElementById("barChart");
    const barOption = {
      title: {
        text: "特征重要性",
        left: "center",
        top: 20,
        textStyle: {
          color: "#000",
          fontSize: 18,
        },
      },
      tooltip: {},
      xAxis: {
        type: "category",
        data: this.state.xdata,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "数据",
          type: "bar",
          data: this.state.ydata,
        },
      ],
    };
    const chart = echarts.init(barChartDom);
    chart.setOption(barOption);
  }
  render() {
    const { data ,columns,option} = this.state;
    return (
      <div>
        <Table columns={columns} dataSource={data}></Table>
        <div id="barChart" style={{ height: "400px", marginTop: "50px" }}></div>
      </div>
    );
  }
}
export default ExamplePage;
